<template>
  <!-- start 日期格式 -->
  <div class="form-setting-group form-setting-item">
    <h4 class="form-item-title">
      {{$t('common.form.setting.date.settingDes1')}} 
      <el-tooltip placement="top" popper-class="form-msg-setting-tooltip">
        <div slot="content">
          <div class="tooltip">YYYY-MM-DD HH:MM:SS (2018-06-27 13:24:21)</div>
        </div>
        <i class="iconfont icon-question"></i>
      </el-tooltip>
    </h4>
    <div class="form-item-box form-date-type">
      <div class="form-setting-item" >
        <el-select 
          v-model="dateType" 
          @change="update(dateType, 'dateType', true)" 
          :placeholder="$t('common.form.placeHolder.date.pla1')" 
          style="width: 200px;"
        >
          <el-option 
            v-for="(item, index) in pickerMapOption" 
            :label="item.label" 
            :value="item.value" 
            :key="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
  <!-- end 日期格式 -->
</template>

<script>
import pickerOption from '@src/component/form/components/FormDate/pickerOption';
/* props */
import { settingProps } from '@src/component/form/components/props';
export default {
  name: 'form-date-format-setting',
  props: {
    ...settingProps
  },
  data() {
    return {
      dateType: 'yyyy-MM-dd'
    }
  },
  computed: {
    /** 
    * @description 获取日期格式选择项
    */
    pickerMapOption() {
      return pickerOption;
    },
  },
  watch: {
    'field.setting': {
      handler(v) {
        this.dateType = v.dateType || 'yyyy-MM-dd'
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.initDateType();
  },
  methods: {
    initDateType() {
      const isDateHour = Boolean(this.field?.setting?.isDateHour)
      if (isDateHour) {
        this.dateType = "yyyy-MM-dd HH"
      }
    },
    update(value, prop, isSetting = false){ 
      this.$emit('input', {value, prop, isSetting})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>